<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./dist/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }
        
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #454545;
            margin: 0;
            padding: 0;
        }
        
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        /* 10 */
        
        .matrix_box {
            width: 500px;
            height: 500px;
            background-color: #a0b3d6;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, .6);
            background-image: url(https://cdn.vuetifyjs.com/images/parallax/material2.jpg);
            transition: all 0.5s;
        }
        
        #Slide1 {
            width: 1500px;
        }
        
        #Slide2 {
            width: 1500px;
            text-align: left;
        }
        
        p>img {
            text-align: center;
            width: 1500px;
        }
        
        h1,
        h2,
        h3,
        h4 {
            voice-family: male;
            richness: 80;
        }
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- <img style="width: 100%" src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg" alt="" srcset=""> -->
            <div class="swiper-slide">
                <div id="Slide1">
                    <h1> 海恩思技术交流分享会第二期 </h1>
                    <h1> 分享主题： 层叠样式表 （ CSS ）</h1>
                    <h2>分享人：汲英豪 </h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1> 目录：</h1>
                    <h2>1. 语言简介 </h2>
                    <h2>2. 语言特点 </h2>
                    <h2>3. 选择器</h2>
                    <h2>4. 选择器权重</h2>
                    <h2>5. @规则语法</h2>
                    <h2>6. HTML文档元素</h2>
                    <h2>7. 盒子模型</h2>
                    <h2>8. 媒体查询</h2>
                    <h2>9. CSS3动画</h2>
                    <h2>10. CSS单位</h2>
                    <h2>11. CSS兼容</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1> 语言简介 </h1>
                    <h2> css全称是Cascading Style Sheets，中文翻译就是层叠样式表</h2>
                    <h2> 这是一种用来表现HTML或者XML等文件样式的计算机语言 </h2>
                    <h2> 拥有对网页对象和模型样式编辑的能力。 </h2>
                    <h2> 拥有很多独有的语言特点 </h2>
                    <h2>就是一种可以定义样式结构的语言 </h2>
                    <h2>CSS 定义以下文档类型的格式：
                        <h3> 超文本标记语言（HTML）</h3>
                        <h3> 可扩展的超文本标记语言（XHTML）</h3>
                        <h3> 可扩展标记语言（XML）</h3>
                        <h3> 可缩放矢量图形（SVG）</h3>
                        <h3> XML 用户界面语言（XUL）</h3>
                    </h2>
                    <p><img src="dist/img/1_110928091909_1.png"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>语言特点</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>丰富的样式定义 </h2>
                    <h2> CSS提供了非常丰富的文档样式 </h2>

                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>易于使用</h2>
                    <h2>CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>继承性：</h2>
                    <h2>继承性是指当子标签没有设置样式时，会继承父标签的样式。</h2>
                    <h2>可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>优先级</h2>
                    <h2>优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide1">
                    <h1> 选择器 </h1>
                    <p><img src="dist/img/20181012184321741243.jpg"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>元素选择器</h2>
                    <p><img src="dist/img/微信截图_20190706103315.png"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>类选择器</h2>
                    <p><img src="dist/img/微信截图_20190706103636.png"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>ID 选择器</h2>
                    <p><img src="dist/img/微信截图_20190706103747.png"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>通配选择器 *, ns|*, *|*, |*</h2>
                    <h2>属性选择器 [属性=值]</h2>
                    <h2>组合选择器节</h2>
                    <h2>相邻兄弟选择器 A + B</h2>
                    <h2>普通兄弟选择器 A ~ B</h2>
                    <h2>子选择器 A > B</h2>
                    <h2>后代选择器 A B</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>伪类 （60个）</h2>
                    <h2>:active</h2>
                    <h2>:host</h2>

                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>伪元素（12个）</h2>
                    <h2>::after (:after)</h2>
                    <h2>::cue (:cue)</h2>
                    <a href="http://www.w3school.com.cn/cssref/css_selectors.asp"> w3school </a>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide1">
                    <h1>选择器权重</h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide1">
                    <p><img style="width: 1000px;" src="dist/img/css_weight.png"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide1">
                    <h2>如果详细的进行分析，排列组合有太多种了，太过麻烦。我们就说说有哪几个类别：</h2>
                    <h2>行内样式： 即 style = "font-size: 12px"；</h2>
                    <h2>id选择器： 　 即 #thisId {font-size: 12px;}</h2>
                    <h2>class选择器： 即 .thisClass {font-size: 12px;}</h2>
                    <h2>元素选择器： 即 p {font-size: 12px;}</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>几个规则：</h2>
                    <h2>权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】</h2>
                    <h2>继承的权重为(0,0,0,0)</h2>
                    <h2>标签选择器的权重为(0,0,0,1)</h2>
                    <h2>类、伪类选择器的权重为(0,0,1,0)</h2>
                    <h2>id选择器选择器的权重为(0,1,0,0)</h2>
                    <h2>行内样式的权重为(1,0,0,0)</h2>
                    <h2>!important的权重无限大</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">。
                    <h2>计算方法：</h2>
                    <h2>按照计算规则给每位填充数字，对应位置相等，则比较下一位；</h2>
                    <h2>多个选择器混杂时，权重之和也是用四个数字来组成，每一位的值为多个选择器四个数字的每位之和，</h2>
                    <h2>比如div:first-child的权重为(0,0,0,1)+(0,0,1,0)=(0,0,1,1)，</h2>
                    <h2>比如div ul li 为(0,0,0,3),</h2>
                    <h2>比如a:hover为(0,0,1,1)</h2>
                    <h2>权重之和的数制是不会进位的，再多的标签选择器权重加和也抵不过一个类选择器。</h2>
                    <h2>多个选择器之间的顺序是无关的，不影响权重之和。</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide1">
                    <h1> 规则语法 </h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h2>
                        <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference"> CSS语法规则 </a>
                    </h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>HTML文档元素</h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <p><img src="dist/img/微信截图_20190706105049.png"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>HTML的大多数元素都是块级(block)元素或行内(inline)元素</h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>块级元素</h1>
                    <h2>
                        默认情况下，块级元素会另起一行，并尽可能的充满整个容器。 块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构
                    </h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>块级元素列表：
                    </h1>
                    <h2>html5新增的元素： figcation：图文信息组标题 ，article：文章，figure：图文信息组 output：表单输出，aside：侧栏内容，footer：区段尾或页尾，audio：音频播放 video：视频播放，section：页面区段，canvas：画布、绘制图形，header：区段头或页头 hgroup：标题组 address：联系方式信息，ol：有序列表，p：行，form：表单，pre：预格式化文本，blockqute：块引用 h1-h6：标题，table：表格，dd：列表中条目描述，dl：定义列表，div，hr：水平分割线
                    </h2>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>行内元素
                    </h1>
                    <h2>行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间， 只能包含数据和其他行内元素
                    </h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>行内元素列表</h1>
                    <h2>
                        b，big，i，small，tt， abbr，acronym，cite，code，dfn，em，kbd，strong，samp，var， a，bdo，br，img，map，object，q，script，span，sub，sup， button，input，label，select，textarea
                    </h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>块级元素和行内元素的区别</h1>
                    <h2>块级元素：</h2>
                    <h3>1.会另起一行，</h3>
                    <h3>2.可以设置width，height，margin，padding，border属性</h3>
                    <h3>3.默认宽度是容器的100%</h3>
                    <h2>
                        行内元素：</h2>
                    <h3>1.和其他元素在同一行内</h3>
                    <h3>2.高度和宽度就是内容的高度和宽度</h3>
                    <h3>3.可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性</h3>
                    <h3>4.border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加</h3>

                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>正常流</h1>
                    <h2>
                        正常流指：从左到右，从上到下显示。要让一个元素不在正常流中，唯一的办法是让元素浮动或定位</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>非替换元素</h1>
                    <h2>如果元素的内容包含在文档中，则称之为非替换元素。比如一个段落的文本都在该元素本身之内，这个段落就是一个非替换元素。</h2>
                    <h1>替换元素</h1>
                    <h2>作为其他内容占位符的一个元素称为替换元素，根据标签和属性的值来显示内容的元素。比如img元素，它只是指向一个图像文件，这个文件插入到文档流中。大多数表单元素（input，根据type属性来显示内容）也是替换元素。</h2>
                    <h1>根元素</h1>
                    <h2>位于文档树的顶端，在html文档中就是html元素</h2>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>盒子模型</h1>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>盒模型</h1>
                    <h2>html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <p><img style="width: 1000px;" src="dist/img/16c9cc6ea5b256a0d7a0ae60c926f14.png"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide1">
                    <h1>媒体查询</h1>
                    <h2>Media Queries模块是CSS3中的一个和各种媒体相关的重要模块</h2>
                    <h2>使用方法：@media 设备类型 and (设备特征) (样式代码)</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <p><img src="dist/img/20161128200805553"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <p><img src="dist/img/20161128200821542"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>真正广泛使用且所有浏览器都兼容的媒介类型是'screen'和'all'</h1>
                    <p>@media not (all and (monochrome)) { ... }</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>为宽屏设备选择了一个特殊的样式表。</h1>
                    <p>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>宽度8.5英寸的打印机应用样式表</h1>
                    <p> link rel="stylesheet" media="print and (min-width: 8.5in)" href="http://foo.com/mystyle.css" </p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>每个像素至少8比特的黑白设备应用样式表</h1>
                    <p>@media all and (min-monochrome: 8) { ... }</p>
                    <h1>黑白设备应用样式表</h1>
                    <p>@media all and (monochrome) { ... }</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>15字符宽度或更窄的手持设备应用样式</h1>
                    <p>@media handheld and (grid) and (max-width: 15em) { ... }</p>
                    <h1>宽高至少为一比一的设备选择了一个特殊的样式表</h1>
                    <p>@media screen and (min-aspect-ratio: 1/1) { ... </p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>听觉样式表</h1>
                    <p>听觉样式表可把语音合成与音响效果相组合，使用户可以听到信息，而无需进行阅读。</p>
                    <h2>听觉呈现可用于：</h2>
                    <h2>视觉能力低弱的人士</h2>
                    <h2>帮助用户学习阅读</h2>
                    <h2>帮助有阅读障碍的用户</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>CSS3动画 （Animation）</h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>非替换元素</h1>
                    <h2>过渡属性</h2>
                    <h2>transition 简写属性，用于在一个属性中设置四个过渡属性。 3</h2>
                    <h2>transition-property 规定应用过渡的 CSS 属性的名称。 3</h2>
                    <h2>transition-duration 定义过渡效果花费的时间。 3</h2>
                    <h2>transition-timing-function 规定过渡效果的时间曲线。 3</h2>
                    <h2>transition-delay 规定过渡效果何时开始。</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>@keyframes 规定动画。 3</h1>
                    <h2>animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3</h2>
                    <h2>animation-name 规定 @keyframes 动画的名称。 3</h2>
                    <h2>animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3</h2>
                    <h2>animation-timing-function 规定动画的速度曲线。 3</h2>
                    <h2>animation-delay 规定动画何时开始。 3</h2>
                    <h2>animation-iteration-count 规定动画被播放的次数。 3</h2>
                    <h2> animation-direction 规定动画是否在下一周期逆向地播放。 3</h2>
                    <h2>animation-play-state 规定动画是否正在运行或暂停。 3</h2>
                    <h2>animation-fill-mode 规定对象动画时间之外的状态。 3</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>动画效果</h1>
                    <h2> <a href="https://www.html5tricks.com/demo/pure-css3-google-loading/index.html">CSS动画</a> </h2>
                    <h2> <a href="https://www.html5tricks.com/demo/css3-svg-card-rotate/index.html">CSS动画</a> </h2>
                    <h2> <a href="https://www.html5tricks.com/demo/pure-css3-drawer-animation/index.html">CSS动画</a> </h2>
                    <h2> <a href="https://www.html5tricks.com/demo/pure-css3-3d-pirates/index.html">CSS动画</a> </h2>
                    <h2> <a href="https://www.html5tricks.com/demo/css3-girl-swinging-animation/index.html">CSS动画</a> </h2>
                    <h2> <a href="https://www.html5tricks.com/demo/css3-shine-cube/index.html">CSS动画</a> </h2>
                    <h2> <a href="https://cubic-bezier.com/#.17,.67,.83,.67">https://cubic-bezier.com/#.17,.67,.83,.67</a> </h2>

                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>transform: matrix(a,b,c,d,e,f);</h1>
                    <h2>matrix是可以代替：偏移量（translate）,缩放（scale），斜切（skew），旋转（rotate），四大功能的，任意一个matrix样式改变而来的形状也都能通过以上四个功能实现</h2>
                    <p><img src="dist/img/761476533-5993bad8db518_articlex.png"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>CSS变形transform(3d)</h1>
                    <h2>
                        <a href="https://www.cnblogs.com/xiaohuochai/p/5351477.html"></a>
                    </h2>
                    <h2>
                        <a href="https://www.html5tricks.com/demo/html5-canvas-text-line-shine/index.html"></a>
                    </h2>
                    <h2>
                        <a href="https://threejs.org/examples/#webgl_animation_keyframes"></a>
                    </h2>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>css3中常见的单位</h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>px：绝对单位，页面按精确像素展示</h1>
                    <h1>em：相对单位，基准点为父节点字体的大小，如果自身定义了按自身来计算（浏览器默认字体是），整个页面内不是一个固定的值。</h1>
                    <h1>rem: ：相对单位，可理解为”相对根节点的字体大小来计算，新加属性，</h1>
                    <h1>vw: viewpoint width ，视窗宽度，等于视窗宽度的1%</h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>vh: viewpoint height ，视窗高度，等于视窗高度的1%</h1>
                    <h1>vmin：vw和vh中较小的那个。</h1>
                    <h1>vmax：vw和vh中较大的那个。</h1>
                    <h1>%:百分比</h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>in:寸</h1>
                    <h1>cm:厘米</h1>
                    <h1>mm:毫米</h1>
                    <h1>pt:point，大约1/72寸</h1>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="Slide2">
                    <h1>pc:pica，大约6pt，1/6寸</h1>
                    <h1>ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)</h1>
                    <h1>ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)</h1>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1> CSS浏览器兼容 </h1>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1> </h1>
                    <p><img src="dist/img/微信截图_20190706114225.png"></p>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <p><img src="dist/img/微信截图_20190706114308.png"></p>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <p><img src="dist/img/微信截图_20190706114359.png"></p>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h2></h2>
                    <h2>CSS3的前缀写法</h2>
                    <h2>-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */</h2>
                    <h2>-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */</h2>
                    <h2> -o- /* Opera浏览器(早期) */</h2>
                    <h2> -ms- /* Internet Explorer (不一定) */ </h2>
                    <h2> </h2>
                    <h2> -moz-border-radius: 10px; </h2>
                    <h2> -webkit-border-radius: 10px; </h2>
                    <h2> -o-border-radius: 10px; </h2>
                    <h2>border-radius: 10px; </h2>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1> css3属性兼容 </h1>
                    <p><img src="dist/img/553c630aaea7459a6ceec08c135e01fb.jpe"></p>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1> CSS3选择器兼容 </h1>
                    <p><img src="dist/img/be7d1ca8c9f957c54de20e87ebc80be9.jpe"></p>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1> html5表单兼容 </h1>
                    <p><img src="dist/img/c3ebf2eccb545d9625db3b9614a36f25.jpe"></p>
                </div>
            </div>

            <div class="swiper-slide">
                <div id="Slide2">
                    <h1> <a href="http://c.biancheng.net/view/1281.html">  浏览器对CSS3的支持</a> </h1>
                </div>
            </div>

            <div class="swiper-slide">
                <p id="matrixDetail">目前属性值为：matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</p>
                <div id="matrixBox" class="matrix_box"></div>
                <p><button id="matrixBtn">随机比例变换</button></p>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="./dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
            },
        });
        // 10
        (function() {
            var $ = function(selector) {
                return document.querySelector(selector);
            };
            var $css3Transform = function(element, value) {
                var arrPriex = ["O", "Ms", "Moz", "Webkit", ""],
                    length = arrPriex.length;
                for (var i = 0; i < length; i += 1) {
                    element.style[arrPriex[i] + "Transform"] = value;
                }
            };
            var eleDetail = $("#matrixDetail"),
                eleBtn = $("#matrixBtn"),
                eleBox = $("#matrixBox");

            if (eleDetail && eleBtn && eleBox) {
                eleBtn.addEventListener("click", function() {
                    var scaleX = Math.random(),
                        scaleY = Math.random(),
                        scaleZ = Math.random();
                    var valTransform = 'matrix3d(' + scaleX.toFixed(6) + ', 0, 0, 0, 0, ' + scaleY.toFixed(6) + ', 0, 0, 0, 0, ' + scaleZ.toFixed(6) + ', 0, 0, 0, 0, 1)';
                    eleDetail.innerHTML = '目前属性值为：' + valTransform;
                    $css3Transform(eleBox, valTransform);
                });
            }
        })();
    </script>
</body>

</html>